<template>
  <div class="hotelFilter">
    <div class="price">
      价格
      <span class="val">0-{{ value }}</span>
      <div class="block">
        <el-slider
          class="demonstration"
          v-model="value"
          :max="4000"
          @change="changePrice"
        >
        </el-slider>
      </div>
    </div>
    <el-divider direction="vertical"></el-divider>
    <div class="price">
      <div class="title">住宿等级</div>

      <!-- <div>{{ levels }}</div> -->
      <el-select v-model="value1" placeholder="不限">
        <el-option
          v-for="item in levels"
          :key="item.value"
          :label="item.name"
          :value="item.name"
          @click.native="
            selectArrData1(item.name, levelsArr, levelsNum, item.id)
          "
        >
        </el-option>
      </el-select>
      <!-- 以下是bug代码  要将内容替换成标签，才可以，不然会横向显示，-->
      <!-- <el-dropdown-menu slot="dropdown">
          <el-checkbox label="复选框 A"></el-checkbox>
          <el-checkbox label="复选框 A"></el-checkbox>
          <el-checkbox v-model="checked">内容</el-checkbox>
          <el-checkbox v-model="checked">备选项</el-checkbox>
        </el-dropdown-menu> -->
    </div>
    <el-divider direction="vertical"></el-divider>
    <div class="price">
      <div class="title">住宿类型</div>
      <el-select
        v-model="value2"
        placeholder="不限"
        @change="requestHotelList()"
      >
        <el-option
          v-for="item in types"
          :key="item.value"
          :label="item.name"
          :value="item.name"
          @click.native="selectArrData2(item.name, typesArr, typesNum, item.id)"
        >
        </el-option>
      </el-select>
    </div>
    <el-divider direction="vertical"></el-divider>
    <div class="price">
      <div class="title">酒店设施</div>
      <el-select v-model="value3" placeholder="不限">
        <el-option
          v-for="item in brands"
          :key="item.value"
          :label="item.name"
          :value="item.name"
          @click.native="
            selectArrData3(item.name, brandsArr, brandsNum, item.id)
          "
        >
        </el-option>
      </el-select>
    </div>
    <el-divider direction="vertical"></el-divider>
    <div class="price">
      <div class="title">酒店品牌</div>
      <el-select v-model="value4" placeholder="不限">
        <el-option
          v-for="item in assets"
          :key="item.value"
          :label="item.name"
          :value="item.name"
          @click.native="
            selectArrData4(item.name, assetsArr, assetsNum, item.id)
          "
        >
        </el-option>
      </el-select>
    </div>
    <el-divider direction="vertical"></el-divider>
    <div class="price">
      <el-button type="primary" class="elButton" @click.native="revoke"
        >撤销条件</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotelList_filter: [],
      myUrl: "",
      id1: [],
      id2: [],
      id3: [],
      id4: [],
      levelsArr: [],
      assetsArr: [],
      brandsArr: [],
      typesArr: [],
      assets: [],
      brands: [],
      levels: [],
      types: [],
      assetsNum: 0,
      brandsNum: 0,
      levelsNum: 0,
      typesNum: 0,
      checked: false,
      checked1: [
        {
          isChecked: false,
          isChecked: false,
          isChecked: false,
          isChecked: false,
          isChecked: false,
        },
      ],
      checkList: ["选中且禁用", "复选框 A"],
      value: 4000,
      value1: "",

      value1: [],
      value2: [],
      value3: [],
      value4: [],
      value5: [],
      cityId: "",
    };
  },
  created() {
    this.$axios({
      url: "/hotels/options",
    }).then((res) => {
      // console.log(res.data.data);
      this.assets = res.data.data.assets;
      this.brands = res.data.data.brands;
      this.levels = res.data.data.levels;
      this.types = res.data.data.types;
      console.log(res);
      // console.log(this.assets);
      // console.log(this.brands);
      // console.log(this.types);
    });

    this.$axios({
      method: "get",
      url: "/hotels?",
      params: {
        city: this.$route.query.id,
      },
    }).then((res) => {
      console.log("重新获取旅馆列表filter");
      this.hotelList_filter = res.data.data;
    });
  },
  methods: {
    changePrice() {
      this.requestHotelList();
    },
    // axios请求渲染旅馆列表
    requestHotelList() {
      this.myUrl = "";
      console.log(this.myUrl);
      console.log(this.id1);

      this.id1.forEach((item) => {
        this.myUrl += "&hotellevel_in=" + item;
      });
      this.id2.forEach((item) => {
        this.myUrl += "&hoteltype_in=" + item;
      });
      this.id3.forEach((item) => {
        this.myUrl += "&hotelbrand=" + item;
      });
      this.id4.forEach((item) => {
        this.myUrl += "&hotelasset=" + item;
      });
      this.myUrl += "&price_lt=" + this.value;
      console.log(this.myUrl);
      this.$axios({
        method: "get",
        url: "/hotels?" + this.myUrl,
        params: {
          city: this.$route.query.id,
          price_lt: this.$route.query.price_lt,
          hotellevel_in: this.$route.query.hotellevel_in,
          hoteltype_in: this.$route.query.hoteltype_in,
          hotelasset_in: this.$route.query.hotelasset,
          hotelbrand_in: this.$route.query.hotelbrand,
        },
      }).then((res) => {
        // console.log("改变数据后需要重新获取旅馆列表");
        // console.log(res);

        //this.$route.query
        // for (const key in this.$route.query) {
        //   this.myUrl += "&" + key + "=" + this.$route.query[key];
        // }
        // console.log(this.value);
        this.hotelList_filter = res.data.data;
        this.$emit("getHotelList", this.hotelList_filter);
        this.$emit("getHotelTotal", res.data.total);
        console.log(res.data.total);

        // this.$router.push(this.$route.fullPath + this.myUrl);
        // console.log(this.$route);
      });
    },
    // 撤销按钮
    revoke() {
      this.id1 = [];
      this.id2 = [];
      this.id3 = [];
      this.id4 = [];
      this.levelsArr = [];
      this.assetsArr = [];
      this.brandsArr = [];
      this.typesArr = [];
      this.value = 4000;
      this.value1 = "";
      this.value2 = "";
      this.value3 = "";
      this.value4 = "";
      this.value5 = "";
      this.$router.push({
        path: "/hotel",
        query: {
          id: this.$route.query.id,
          cityName: this.$route.query.cityName,
        },
      });
      this.$axios({
        method: "get",
        url: "/hotels?",
        params: {
          city: this.$route.query.id,
        },
      }).then((res) => {
        this.hotelList_filter = res.data.data;
        this.$emit("getHotelList", this.hotelList_filter);

        // this.$router.push(this.$route.fullPath + this.myUrl);
        // this.myUrl = "";
      });
    },

    selectArrData1(v, arr, num, id) {
      // if(this.levelsArr.length)
      if (arr.length == 0) {
        arr.push(v);
        this.id1.push(id);
      } else {
        if (arr.indexOf(v) == -1) {
          arr.push(v);
          this.id1.push(id);
        } else {
          arr.splice(arr.indexOf(v), 1);
          this.id1.splice(this.id1.indexOf(id), 1);
        }
      }

      if (arr.length > 1) {
        num = arr.length;
        console.log(num);
        this.value1 = "已有" + num + "项";
      }
      if (arr.length == 1) {
        num = arr.length;

        this.value1 = arr[0];
      }
      if (arr.length == 0) {
        this.value1 = "不限";
      }

      this.requestHotelList();
    },

    selectArrData2(v, arr, num, id) {
      // if(this.levelsArr.length)
      if (arr.length == 0) {
        this.id2.push(id);
        arr.push(v);
      } else {
        if (arr.indexOf(v) == -1) {
          arr.push(v);
          this.id2.push(id);
        } else {
          arr.splice(arr.indexOf(v), 1);
          this.id2 = this.id2.splice(this.id2.indexOf(id), 1);
          // arr.id1(this.id2.indexOf(id), 1);
        }
      }

      if (arr.length > 1) {
        num = arr.length;
        this.value2 = "已有" + num + "项";
      }
      if (arr.length == 1) {
        num = arr.length;

        this.value2 = arr[0];
      }
      if (arr.length == 0) {
        this.value2 = "不限";
      }
      this.requestHotelList();
    },
    selectArrData3(v, arr, num, id) {
      // if(this.levelsArr.length)
      if (arr.length == 0) {
        this.id3.push(id);
        arr.push(v);
      } else {
        if (arr.indexOf(v) == -1) {
          this.id3.push(id);
          arr.push(v);
        } else {
          arr.splice(arr.indexOf(v), 1);
          this.id3 = this.id3.splice(this.id3.indexOf(id), 1);

          // arr.splice(this.id3.indexOf(id), 1);
        }
      }

      if (arr.length > 1) {
        num = arr.length;
        console.log(num);
        this.value3 = "已有" + num + "项";
      }
      if (arr.length == 1) {
        num = arr.length;

        this.value3 = arr[0];
      }
      if (arr.length == 0) {
        this.value3 = "不限";
      }
      this.requestHotelList();
    },
    selectArrData4(v, arr, num, id) {
      // if(this.levelsArr.length)
      if (arr.length == 0) {
        this.id4.push(id);
        arr.push(v);
      } else {
        if (arr.indexOf(v) == -1) {
          this.id4.push(id);
          arr.push(v);
        } else {
          arr.splice(arr.indexOf(v), 1);
          this.id4 = this.id4.splice(this.id4.indexOf(id), 1);
          // arr.splice(this.id4.indexOf(id), 1);
        }
      }

      if (arr.length > 1) {
        num = arr.length;
        console.log(num);
        this.value4 = "已有" + num + "项";
      }
      if (arr.length == 1) {
        num = arr.length;

        this.value4 = arr[0];
      }
      if (arr.length == 0) {
        this.value4 = "不限";
      }
      this.requestHotelList();
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.hotelFilter {
  /deep/ el-dropdown-menu__item el-dropdown-menu__item--divided {
    border: 0px !important;
  }
  display: flex;
  width: 100%;
  //   background-color: #6cf;
  height: 80px;
  border: 1px solid #ddd;
  padding: 5px 0px;
  margin: 20px 0;
  .el-dropdown-menu__item--divided {
    position: relative;
    margin-top: 6px;
    border-top: 0px solid #ebeef5 !important;
  }
  .price {
    margin-left: 20px;
    margin-top: 10px;
    flex: 1;
    overflow: hidden;
    .val {
      float: right;
    }
    .el-dropdown {
      width: 100%;
      .el-button--primary {
        color: #666;
        background-color: transparent;
        width: 100%;
        text-align: left;
        border-color: transparent;
      }
      .el-button {
        padding: 12px 0;
      }
      i {
        float: right;
      }
    }
    .block {
      width: 90%;
    }
    .elButton {
      margin: 10px 0px 0px 5px;
    }
  }
  .el-divider--vertical {
    height: 70px;
    margin-top: 5px;
  }
}
</style>